<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 + Element Plus + ECharts 示例</title>
  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <!-- 引入 Element Plus 样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <!-- 引入 Element Plus 组件库 -->
  <script src="https://unpkg.com/element-plus"></script>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
    }
    #app {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 60px;
      background-color: #409EFF;
      color: white;
      flex-shrink: 0;
    }
    .header-left h1 {
      font-size: 20px;
    }
    .el-dropdown-link {
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
    .main-content {
      flex: 1;
      padding: 20px;
      overflow: auto;
      background-color: #f0f2f5;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 20px;
      height: 100%;
    }
    .grid-item {
      background-color: #fff;
      border-radius: 4px;
      padding: 10px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
    }
    .chart-title {
      margin-bottom: 10px;
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }
    .chart-container {
      flex: 1;
      width: 100%;
      min-height: 200px;
    }
    .footer {
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #f5f7fa;
      border-top: 1px solid #e6e6e6;
      flex-shrink: 0;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- 上部布局 -->
    <header class="header">
      <div class="header-left">
        <h1>数据分析平台</h1>
      </div>
      <div class="header-right">
        <el-dropdown>
          <span class="el-dropdown-link">
            菜单选项<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>数据概览</el-dropdown-item>
              <el-dropdown-item>用户分析</el-dropdown-item>
              <el-dropdown-item>销售报表</el-dropdown-item>
              <el-dropdown-item divided>系统设置</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>
    
    <!-- 中间布局 -->
    <main class="main-content">
      <div class="grid-container">
        <div class="grid-item" v-for="(item, index) in charts" :key="index">
          <div class="chart-title">{{ item.title }}</div>
          <div class="chart-container" :ref="'chart'+index"></div>
        </div>
      </div>
    </main>
    
    <!-- 下部布局 -->
    <footer class="footer">
      <p>© 2023 公司名称 版权所有</p>
    </footer>
  </div>

  <script>
    const { createApp, ref, onMounted } = Vue;
    
    createApp({
      setup() {
        const charts = ref([
          { type: 'bar', title: '月度销售额' },
          { type: 'line', title: '用户增长趋势' },
          { type: 'pie', title: '产品占比' },
          { type: 'scatter', title: '用户分布' },
          { type: 'radar', title: '能力评估' },
          { type: 'gauge', title: '完成率' },
          { type: 'funnel', title: '转化漏斗' },
          { type: 'heatmap', title: '活跃度热力图' },
          { type: 'custom', title: '自定义图表' }
        ]);
        
        const initCharts = () => {
          charts.value.forEach((item, index) => {
            const chartDom = document.querySelector(`[ref="chart${index}"]`);
            if (!chartDom) return;
            
            const chart = echarts.init(chartDom);
            const option = getChartOption(item.type);
            chart.setOption(option);
            
            window.addEventListener('resize', function() {
              chart.resize();
            });
          });
        };
        
        const getChartOption = (type) => {
          const options = {
            bar: {
              tooltip: { trigger: 'axis' },
              xAxis: { 
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月']
              },
              yAxis: { type: 'value' },
              series: [{
                data: [120, 200, 150, 80, 70, 110],
                type: 'bar',
                showBackground: true,
                backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' }
              }]
            },
            line: {
              tooltip: { trigger: 'axis' },
              xAxis: {
                type: 'category',
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              },
              yAxis: { type: 'value' },
              series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
                smooth: true
              }]
            },
            pie: {
              tooltip: { trigger: 'item' },
              legend: { orient: 'vertical', right: 10, top: 'center' },
              series: [{
                name: '访问来源',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: { borderRadius: 10 },
                label: { show: false },
                emphasis: { label: { show: true } },
                data: [
                  { value: 1048, name: '搜索引擎' },
                  { value: 735, name: '直接访问' },
                  { value: 580, name: '邮件营销' },
                  { value: 484, name: '联盟广告' }
                ]
              }]
            },
            scatter: {
              xAxis: {},
              yAxis: {},
              series: [{
                symbolSize: 20,
                data: [
                  [10.0, 8.04],
                  [8.0, 6.95],
                  [13.0, 7.58],
                  [9.0, 8.81],
                  [11.0, 8.33],
                  [14.0, 9.96],
                  [6.0, 7.24],
                  [4.0, 4.26],
                  [12.0, 10.84]
                ],
                type: 'scatter'
              }]
            },
            radar: {
              tooltip: { trigger: 'item' },
              radar: {
                indicator: [
                  { name: '销售', max: 6500 },
                  { name: '管理', max: 16000 },
                  { name: '技术', max: 30000 },
                  { name: '客服', max: 38000 },
                  { name: '研发', max: 52000 }
                ]
              },
              series: [{
                name: '预算 vs 支出',
                type: 'radar',
                data: [
                  { value: [4200, 3000, 20000, 35000, 50000], name: '预算分配' },
                  { value: [5000, 14000, 28000, 26000, 42000], name: '实际支出' }
                ]
              }]
            },
            gauge: {
              tooltip: { formatter: '{a} <br/>{b} : {c}%' },
              series: [{
                name: '完成率',
                type: 'gauge',
                progress: { show: true },
                detail: { valueAnimation: true, formatter: '{value}%' },
                data: [{ value: 75 }]
              }]
            },
            funnel: {
              tooltip: { trigger: 'item' },
              legend: { data: ['展现', '点击', '访问', '咨询', '订单'] },
              series: [{
                name: '转化漏斗',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                data: [
                  { value: 60, name: '访问' },
                  { value: 40, name: '咨询' },
                  { value: 20, name: '订单' },
                  { value: 80, name: '点击' },
                  { value: 100, name: '展现' }
                ]
              }]
            },
            heatmap: {
              tooltip: { position: 'top' },
              xAxis: { type: 'category', data: ['12a', '1a', '2a', '3a', '4a', '5a'] },
              yAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五'] },
              visualMap: {
                min: 0,
                max: 10,
                calculable: true,
                orient: 'horizontal',
                left: 'center',
                bottom: '15%'
              },
              series: [{
                name: '活跃度',
                type: 'heatmap',
                data: [
                  [0, 0, 5], [0, 1, 7], [0, 2, 3], [0, 3, 5], [0, 4, 2],
                  [1, 0, 1], [1, 1, 2], [1, 2, 4], [1, 3, 8], [1, 4, 2],
                  [2, 0, 2], [2, 1, 3], [2, 2, 8], [2, 3, 6], [2, 4, 7],
                  [3, 0, 3], [3, 1, 7], [3, 2, 5], [3, 3, 1], [3, 4, 6],
                  [4, 0, 3], [4, 1, 2], [4, 2, 7], [4, 3, 8], [4, 4, 9],
                  [5, 0, 2], [5, 1, 2], [5, 2, 3], [5, 3, 4], [5, 4, 1]
                ],
                label: { show: false },
                emphasis: { itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
              }]
            },
            custom: {
              title: { text: '自定义图表' },
              tooltip: {},
              legend: { data: ['销量'] },
              xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },
              yAxis: {},
              series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20],
                itemStyle: {
                  color: function(params) {
                    const colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83'];
                    return colorList[params.dataIndex];
                  }
                }
              }]
            }
          };
          
          return options[type] || options.bar;
        };
        
        onMounted(() => {
          initCharts();
        });
        
        return {
          charts
        };
      }
    })
    .use(ElementPlus)
    .mount('#app');
  </script>
</body>
</html>